<div id="network-supply-product-bar3" style="height: 100%">

</div>

<script type="text/javascript">
    $(function () {
        loadbar3();
    });
    function loadbar3() {
        var center=$("#prjId").val();
        $.ajax({
            url: "#springUrl('/network/supply/product/bar3')",
            data: {"center": center},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var myChart = echarts.init(document.getElementById('network-supply-product-bar3'), 'macarons');
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '5%',
                            top:'5%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                formatter: function(value){
                                    var var1=value*1;
                                    return var1;
                                },
                                textStyle:{
                                    color:"#595959"
                                }
                            },
                            splitLine:{
                                show:true
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                                }
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: d.data.x,
                            axisLabel:{
                                show:true,
                                textStyle:{
                                    color:"#595959"
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        series: [
                            {
                                type: 'bar',
                                data: d.data.a1,
                                itemStyle: {
                                    normal: {
                                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                                '#0fa99d',
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        //以下为是否显示，显示位置和显示格式的设置了
                                    }},
                                barWidth:15,
                            }
                        ]
                    };
                    myChart.setOption(option);
                }else{
                    var div1="<div type='text' style='padding-top:30%' class=' text-center '>"+d.message+"</div>";
                    $("#network-supply-product-bar3").empty();
                    $("#network-supply-product-bar3").prepend(div1);
                }
            }
        });
    }

</script>